<style type="text/css">
    div#rainbow_image_subject_widget, div#rainbow_image_comment_widget {
        margin:20px 0;
    }
    div#rainbow_image_comment_widget label#rainbow_title {

    }
    .rainbowCommentLine {
        width:677px;
        min-width:677px;
        max-width:677px;
        height:24px;
        min-height:24px;
        max-height:24px;
        padding:2px 10px;
        margin-right:20px;
        line-height:24px;
        font-size:16px;
    }
    input#rainbow_image_subject, div#rainbow_image_comment_widget input#rainbow_image_comment {
        outline:none;
        border:0 solid white;
    }
    input#rainbow_image_subject {
        height:36px;
        min-height:36px;
        max-height:36px;
        line-height:36px;
    }
    div#rainbow_image_comment_widget ul {
        margin:0;
        padding:0;
        list-style-type:none;
    }
</style>
<div id="rainbow_image_subject_widget">
    <label class="rainbowTitle" for="rainbow_image_subject">标题</label>
    <input type="text" id="rainbow_image_subject" class="rainbowCommentLine" size="84"/>
</div>
<div id="rainbow_image_comment_widget">
    <label id="rainbow_title" class="rainbowTitle" for="rainbow_image_comment">描述（可以不填）</label>
    <div style="border-radius:2px;margin-top:5px;">
        <ul style="background-color:white;width:697px;">
        </ul>
        <input type="text" id="rainbow_image_comment" class="rainbowCommentLine" size="84"/>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var input = $("input#rainbow_image_comment");
        var inputFunc = function(event, input){
            var keyCode = event.keyCode;
            var v = input.val();
            if (!$.isEmptyObject(v)) {
                var lines = input.parent().find("ul");
                var s = 0;
                for (var i=0; i< v.length; i++) {
                    var c = v.charCodeAt(i);
                    if (c > 255) {
                        s += 2;
                    } else {
                        s ++;
                    }
                }
                if (s > 84) {
                    input.val(v.substring(v.length - 1, v.length));
                    var line = $("<li class='rainbowCommentLine'/>");
                    line.text(v.substring(0, v.length - 1));
                    lines.append(line);
                } else if (13==keyCode){
                    input.val("");
                    var line = $("<li class='rainbowCommentLine'/>");
                    line.text(v);
                    lines.append(line);
                }
            }
        };
        if ($.browser.chrome){
            input.keydown(function(event){
                inputFunc(event, $(this));
            });
        } else {
            input.keypress(function(event){
                inputFunc(event, $(this));
            });
        }
    });
</script>